<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
      list-style: none;
    }

    .box {
      width: 560px;
      height: 400px;
      background-color: pink;
    }

    img {
      width: 100%;
      height: 320px;
      display: block;
    }

    .bottom {
      height: 80px;
      background-color: blue;
      padding: 10px;
    }

    p {
      margin: 0;
      padding: 0;
      color: white;
    }

    ul {
      display: flex;
      margin: 0;
      padding: 0;
      width: 150px;
      justify-content: space-between;
      align-items: center;
    }

    ul li {
      width: 10px;
      height: 10px;
      margin: 0;
      border-radius: 50%;
      background-color: black;
      opacity: 0.4;
      margin-top: 10px;
    }

    li.light {
      width: 15px;
      height: 15px;
      background-color: white;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="../../../../images/webapi/第一单元/slider01.jpg" alt="">
    <div class="bottom">
      <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

  <script>

    const sliderData = [
      { url: '../../../../images/webapi/第一单元/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: '../../../../images/webapi/第一单元/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: '../../../../images/webapi/第一单元/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: '../../../../images/webapi/第一单元/slider04.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(139, 98, 66)' },
      { url: '../../../../images/webapi/第一单元/slider05.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(67, 90, 92)' },
      { url: '../../../../images/webapi/第一单元/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: '../../../../images/webapi/第一单元/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: '../../../../images/webapi/第一单元/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]


    const ran = Math.floor(Math.random() * sliderData.length)

    //1.更换图片
    const img = document.querySelector('img')
    img.src = sliderData[ran].url

    //2.更换文本
    const p = document.querySelector('p')
    p.innerHTML = sliderData[ran].title

    //3.背景颜色
    const bc = document.querySelector('.bottom')
    bc.style.backgroundColor = sliderData[ran].color

    //4.小圆点
    const li = document.querySelector(`li:nth-child(${ran + 1})`)
    li.classList.add('light')

  </script>

</body>

</html>